<script setup>
import { getRecGoods } from '/src/api/layout.js'
import { ref } from 'vue'
const data = ref([])
const getdata = async () => {
  const res = await getRecGoods()
  data.value = res.data.slice(0, 10)
}
getdata()
</script>
<template>
  <div class="hot">
    <div class="wrapper">
      <div class="title">
        <div class="left">
          <h3>热门推荐</h3>
          <p>最佳选择 品质认证</p>
        </div>
      </div>
      <div class="bd">
        <ul>
          <el-row>
            <li v-for="item in data" :key="item.id">
              <a
                :href="`/goods/detail/${item.id}`"
                target="_blank"
                rel="noopener noreferrer"
              >
                <div class="pic">
                  <el-image
                    style="width: 240px; height: 220px"
                    :fit="fit"
                    :src="item.image"
                    alt="无"
                  />
                  <div class="info">
                    <div class="left">
                      <h5
                        style="
                          max-width: 250px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                      >
                        {{ item.description }}
                      </h5>
                      <p>卖家：{{ item.sellerName }}</p>
                    </div>
                    <div class="right">
                      ¥<span>{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          </el-row>
        </ul>
      </div>
    </div>
  </div>
</template>
<style>
.hot {
  margin-top: 60px;
  padding-bottom: 0px;
  overflow: hidden;
  background-color: #f5f5f5;
}
.hot .title {
  position: relative;
  margin-bottom: 40px;
}
.hot .button {
  display: flex;
  position: absolute;
  right: 0;
  top: 47px;
}
.hot .button a {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  text-align: center;
  line-height: 20px;
  color: #fff;
}
.hot .button a:nth-child(2) {
  margin-left: 12px;
  background-color: #00be9a;
}
.hot .bd ul {
  display: flex;
  justify-content: space-between;
}
.hot .bd li {
  margin-right: 20px;
  width: 225px;
  height: 306px;
}
</style>
